<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="王劲翔">
  <title>YHBTool 前端开发工具</title>
  <link rel="stylesheet" href="./public/css/index.css">
</head>

<body>
  <div>
        <!-- 标题栏 -->
        <div class="title">
            <div>
                <h1>YHBTool 前端开发工具</h1>
                <h3>前端开发便利工具</h3>
            </div>
        </div>
        <!-- 左侧栏 -->
        <div class="left">
            <h3>目 录</h3>
            <h4 id="index">首 页</h4>
            <div>
                <ul id="renderLeftList">
                </ul>
            </div>
        </div>
        <!-- 内容 -->
        <div class="contentBody">
            <!-- 首页 -->
            <div class="first">
                <div class="first-content">
                    <h2>YHBTool 前端开发工具</h2>
                    <p><span class="first-key">描述：</span>封装常用的js方法，简化、调试代码</p>
                    <p><span class="first-key">作者：</span>王劲翔</p>
                    <!-- 普通类型 -->
                    <div class="import1">
                      <h3>普通类型，引入后直接使用  (无法兼容Vue)</h3>
                      <div class="import">
                        <span class="first-key">引入 方式一：</span>
                        <div class="linPre">
                        <span class="perSpan"><span class="symbol"><</span><span class="script">script</span> <span class="src">src</span>='<span
                            class="url" id="httpsUrl"></span>'<span class="symbol">><</span><span
                            class="script">/script</span><span class="symbol">></span></span>
                        </div>
                    </div>
                    <div class="import">
                        <div>
                            <span class="first-key">引入 方式二：</span>
                            <span class="first-key-dec">需要<span id="downloadFile">下载</span>该js文件</span>
                        </div>
                        <div class="linPre">
                        <span class="perSpan"><span class="symbol"><</span><span class="script">script</span> <span class="src">src</span>='<span
                            class="url" id="libUrl"></span>'<span class="symbol">><</span><span
                            class="script">/script</span><span class="symbol">></span></span>
                        </div>
                    </div>
                    </div>
                    <!-- 模块类型 -->
                    <div class="import2">
                      <h3>模块化，按需导入  (在Vue中的单个.vue文件中引入使用)</h3>
                    <div class="import">
                        <div>
                            <span class="first-key">引入方式：</span>
                            <span class="first-key-dec">需要<span id="downloadFile">下载</span>该js文件</span>
                        </div>
                        <div class="linPre">
                        <span class="perSpan"><span class="script">import </span><span class="src">{ </span><span class="explain">需求的方法名</span><span class="src"> } </span><span class="script">from </span>'<span class="url" id="libUrl2"></span>'</span>
                        </div>
                    </div>
                    </div>
                    <!-- 模块类型 -->
                    <div class="import2">
                      <h3>模块化，在Vue中使用this.方法名调用</h3>
                      <div class="import">
                        <div>
                            <span class="first-key">引入方式一：</span>
                        </div>
                        <div class="linPre">
                        <span class="perSpan"><span class="script">npm </span><span class="src">i </span><span class="text">yhb</span>
                        </div>
                    </div>
                    <div class="import">
                        <div>
                            <span class="first-key">引入方式二：</span>
                            <span class="first-key-dec">需要<span id="downloadFile">下载</span>该js文件</span>
                        </div>
                        <div class="pre">
                          <p class="perSpan">
                            <span class="script">import </span><span class="src">{ </span><span class="text">YHB</span><span class="src"> } </span><span class="script">from </span>'<span class="url" id="libUrl3"></span>'
                          </p>
                          <p class="perSpan">
                            <span class="VUE">Vue</span>.<span class="src">use</span><span class="script">(</span><span class="text">YHB</span><span class="script">)</span>
                          </p>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
            <!-- 内容 -->
            <div class="content">
                <div>
                    <div class="content-title">
                        <h2 id="contentTitle">标题<span>类型</span></h2>
                    </div>
                    <div class="content-describe">
                        <h3 id="contentDescribe">描述</h3>
                    </div>
                    <div class="content-sub">
                    </div>
                </div>
            </div>
        </div>
  </div>
  <script src="./src/YHBTool.js"></script>
  <script src="./public/js/listData.js"></script>
  <script src="./public/js/index.js"></script>
</body>

</html>